<template>
  <view class="profile-container">
    <view class="profile-header">
      <view class="user-info">
        <image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
        <view class="user-detail">
          <text class="username">{{ userInfo.username }}</text>
          <text class="user-id">ID: {{ userInfo.userId }}</text>
        </view>
      </view>
      <button class="settings-btn" @tap="goToSettings">
        <text class="settings-icon">⚙️</text>
      </button>
    </view>
    
    <view class="profile-stats">
      <view class="stat-item">
        <text class="stat-number">{{ stats.posts }}</text>
        <text class="stat-label">发布</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{ stats.followers }}</text>
        <text class="stat-label">粉丝</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{ stats.following }}</text>
        <text class="stat-label">关注</text>
      </view>
    </view>
    
    <view class="profile-menu">
      <view class="menu-group">
        <view class="menu-item" @tap="onMenuClick('account')">
          <text class="menu-icon">👤</text>
          <text class="menu-text">账号管理</text>
          <text class="menu-arrow">›</text>
        </view>
        <view class="menu-item" @tap="onMenuClick('collection')">
          <text class="menu-icon">⭐</text>
          <text class="menu-text">我的收藏</text>
          <text class="menu-arrow">›</text>
        </view>
        <view class="menu-item" @tap="onMenuClick('history')">
          <text class="menu-icon">📋</text>
          <text class="menu-text">浏览历史</text>
          <text class="menu-arrow">›</text>
        </view>
      </view>
      
      <view class="menu-group">
        <view class="menu-item" @tap="onMenuClick('help')">
          <text class="menu-icon">❓</text>
          <text class="menu-text">帮助中心</text>
          <text class="menu-arrow">›</text>
        </view>
        <view class="menu-item" @tap="onMenuClick('about')">
          <text class="menu-icon">ℹ️</text>
          <text class="menu-text">关于我们</text>
          <text class="menu-arrow">›</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        username: '跨端开发者',
        userId: 'cross_platform_001',
        avatar: '/static/avatar.png'
      },
      stats: {
        posts: 128,
        followers: 1024,
        following: 256
      }
    }
  },
  onLoad() {
    // 模拟获取用户信息
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      // 这里可以从API获取用户信息
      // 为了演示，使用模拟数据
      setTimeout(() => {
        this.userInfo = {
          username: '跨端开发者',
          userId: 'cross_platform_001',
          avatar: '/static/avatar.png'
        }
      }, 500)
    },
    
    goToSettings() {
      uni.navigateTo({
        url: '/pages/settings/settings'
      })
    },
    
    onMenuClick(type) {
      const messages = {
        account: '账号管理功能开发中...',
        collection: '我的收藏功能开发中...',
        history: '浏览历史功能开发中...',
        help: '帮助中心功能开发中...',
        about: '关于我们功能开发中...'
      }
      
      uni.showToast({
        title: messages[type],
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-container {
  min-height: 100vh;
  background: #f5f5f5;
}

.profile-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 40rpx 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .user-info {
    display: flex;
    align-items: center;
    
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      border: 4rpx solid #fff;
      margin-right: 30rpx;
    }
    
    .user-detail {
      .username {
        display: block;
        font-size: 36rpx;
        font-weight: bold;
        color: #fff;
        margin-bottom: 10rpx;
      }
      
      .user-id {
        display: block;
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
  
  .settings-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .settings-icon {
      font-size: 40rpx;
    }
  }
}

.profile-stats {
  background: #fff;
  display: flex;
  justify-content: space-around;
  padding: 40rpx 0;
  margin-bottom: 20rpx;
  
  .stat-item {
    text-align: center;
    
    .stat-number {
      display: block;
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .stat-label {
      display: block;
      font-size: 24rpx;
      color: #666;
    }
  }
}

.profile-menu {
  .menu-group {
    background: #fff;
    margin-bottom: 20rpx;
    
    .menu-item {
      display: flex;
      align-items: center;
      padding: 30rpx 40rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      &:active {
        background: #f9f9f9;
      }
      
      .menu-icon {
        font-size: 40rpx;
        margin-right: 30rpx;
      }
      
      .menu-text {
        flex: 1;
        font-size: 30rpx;
        color: #333;
      }
      
      .menu-arrow {
        font-size: 36rpx;
        color: #ccc;
      }
    }
  }
}

/* 深色模式适配 */
.dark-theme {
  .profile-container {
    background: #1a1a1a;
  }
  
  .profile-stats {
    background: #2c2c2c;
    
    .stat-number {
      color: #fff;
    }
    
    .stat-label {
      color: #aaa;
    }
  }
  
  .menu-group {
    background: #2c2c2c;
    
    .menu-item {
      border-bottom-color: #3a3a3a;
      
      &:active {
        background: #3a3a3a;
      }
      
      .menu-text {
        color: #fff;
      }
    }
  }
}
</style>
